<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Handmade OpenAPI Showcase</title>
    <script src="https://cdn.jsdelivr.net/npm/tailwindcss-cdn@3.4.10/tailwindcss.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.10.5/cdn.min.js" defer></script>
</head>

<body class="bg-gray-100 min-h-screen py-8 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
        <h1 class="text-3xl font-bold text-center text-gray-900 mb-8">Handmade OpenAPI Showcase</h1>
        <div x-data="{ 
            files: [
                { name: 'README.md', type: 'markdown' },
                { name: 'devto.json', type: 'json' },
                { name: 'rick-and-morty.json', type: 'json' },
                { name: 'hackernews.json', type: 'json' },
                { name: 'serper.json', type: 'json' },
                { name: 'apiguru-list.json', type: 'json' },
                { name: 'doppio.json', type: 'json' },
                { name: 'multion.json', type: 'json' },
                { name: 'wakatime.json', type: 'json' },
                { name: 'cdnjs.json', type: 'json' },
                { name: 'groq.json', type: 'json' },
                { name: 'notion.json', type: 'json' },
                { name: 'wakatime.md', type: 'markdown' }
            ]
        }" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <template x-for="file in files" :key="file.name">
                <div class="bg-white overflow-hidden shadow rounded-lg">
                    <div class="px-4 py-5 sm:p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0" x-show="file.type === 'json'">
                                <svg class="h-8 w-8 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M4.25 2A2.25 2.25 0 002 4.25v11.5A2.25 2.25 0 004.25 18h11.5A2.25 2.25 0 0018 15.75V4.25A2.25 2.25 0 0015.75 2H4.25zm4.03 6.28a.75.75 0 00-1.06-1.06L4.97 9.47a.75.75 0 000 1.06l2.25 2.25a.75.75 0 001.06-1.06L6.56 10l1.72-1.72zm4.5-1.06a.75.75 0 10-1.06 1.06L13.44 10l-1.72 1.72a.75.75 0 101.06 1.06l2.25-2.25a.75.75 0 000-1.06l-2.25-2.25z"
                                        clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="flex-shrink-0" x-show="file.type === 'markdown'">
                                <svg class="h-8 w-8 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M4.25 2A2.25 2.25 0 002 4.25v11.5A2.25 2.25 0 004.25 18h11.5A2.25 2.25 0 0018 15.75V4.25A2.25 2.25 0 0015.75 2H4.25zm2.5 3.5a.75.75 0 01.75-.75h5a.75.75 0 010 1.5h-5a.75.75 0 01-.75-.75zm0 3a.75.75 0 01.75-.75h5a.75.75 0 010 1.5h-5a.75.75 0 01-.75-.75zm0 3a.75.75 0 01.75-.75h5a.75.75 0 010 1.5h-5a.75.75 0 01-.75-.75zm8-1.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
                                        clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 truncate" x-text="file.name"></dt>
                                    <dd class="mt-1 text-sm text-gray-900"
                                        x-text="file.type.charAt(0).toUpperCase() + file.type.slice(1)"></dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-4 py-4 sm:px-6">
                        <div class="text-sm">
                            <a :href="file.name" class="font-medium text-indigo-600 hover:text-indigo-500">
                                View file<span class="sr-only" x-text="', ' + file.name"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</body>

</html>